<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title>区域统计 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 标题和时间筛选 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">区域统计</h2>
            <div class="d-flex gap-2">
                <select class="form-select" id="timeRange" onchange="changeTimeRange()">
                    <option value="today">今日</option>
                    <option value="week">本周</option>
                    <option value="month" selected>本月</option>
                    <option value="year">本年</option>
                </select>
            </div>
        </div>

        <!-- 地图展示 -->
        <div class="card mb-4">
            <div class="card-body">
                <div id="map" style="height: 500px;"></div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>区域</th>
                                <th>回收站数量</th>
                                <th>订单数量</th>
                                <th>订单增长</th>
                                <th>回收重量(kg)</th>
                                <th>重量增长</th>
                                <th>平均评分</th>
                                <th>用户数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="stat : ${regionStats}">
                                <td th:text="${stat.region}">区域名称</td>
                                <td th:text="${stat.stationCount}">0</td>
                                <td th:text="${stat.orderCount}">0</td>
                                <td>
                                    <span th:class="${stat.orderGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                        <i th:class="${stat.orderGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                        [[${#numbers.formatDecimal(Math.abs(stat.orderGrowth), 1, 1)}]]%
                                    </span>
                                </td>
                                <td th:text="${stat.totalWeight}">0</td>
                                <td>
                                    <span th:class="${stat.weightGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                        <i th:class="${stat.weightGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                        [[${#numbers.formatDecimal(Math.abs(stat.weightGrowth), 1, 1)}]]%
                                    </span>
                                </td>
                                <td>
                                    <div class="rating">
                                        <span th:text="${#numbers.formatDecimal(stat.avgRating, 1, 1)}">0</span>
                                        <i class="fas fa-star text-warning"></i>
                                    </div>
                                </td>
                                <td th:text="${stat.userCount}">0</td>
                                <td>
                                    <a th:href="@{/statistics/region/{region}(region=${stat.region})}" 
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-chart-line"></i>
                                        详情
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <th:block th:fragment="extraStyles">
        <style>
            .rating {
                display: flex;
                align-items: center;
                gap: 0.25rem;
            }
        </style>
    </th:block>

    <th:block th:fragment="extraScripts">
        <!-- 百度地图API -->
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=${baiduMapKey}"></script>
        <script th:inline="javascript">
            // 初始化地图
            const map = new BMap.Map('map');
            const regionStats = /*[[${regionStats}]]*/ [];
            
            // 设置地图中心点和缩放级别
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            map.enableScrollWheelZoom();
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            
            // 添加区域标记
            regionStats.forEach(stat => {
                const point = new BMap.Point(stat.longitude, stat.latitude);
                const marker = new BMap.Marker(point);
                map.addOverlay(marker);
                
                // 创建信息窗口
                const content = `
                    <div style="padding: 10px;">
                        <h6>${stat.region}</h6>
                        <p class="mb-1">回收站：${stat.stationCount}个</p>
                        <p class="mb-1">订单数：${stat.orderCount}个</p>
                        <p class="mb-1">回收量：${stat.totalWeight}kg</p>
                        <p class="mb-0">评分：${stat.avgRating.toFixed(1)}分</p>
                    </div>
                `;
                const infoWindow = new BMap.InfoWindow(content);
                
                // 点击标记显示信息窗口
                marker.addEventListener('click', () => {
                    map.openInfoWindow(infoWindow, point);
                });
            });
            
            // 切换时间范围
            function changeTimeRange() {
                const range = document.getElementById('timeRange').value;
                window.location.href = `/statistics/region?range=${range}`;
            }
        </script>
    </th:block>
</body>
</html> 